<template>
  <a-card class="general-card" title="控制面板">
    <template #extra>
    </template>
    <a-split :style="{
        height: '600px',
        width: '100%',
        minWidth: '600px',
        border: '1px solid var(--color-border)'
      }"
      v-model:size="containerScale"
      min="80px"
    >
      <template #first>
        <div class="phone-container">
          <phone1 @rttChanged="rttChanged" ref="phoneRef"></phone1>
          <div style="position:absolute;top:50px;left:30px" v-if="rtt!==null">延迟：{{rtt}}ms</div>
        </div>
      </template>
      <template #second>
        <div class="opr-container">
          <screen @adjustConnect="adjustConnect"></screen>
        </div>
      </template>
    </a-split>
  </a-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useUserStore } from '@/store';
import phone1 from "./phone1.vue"
import screen from './screen.vue'

const phoneRef = ref()
const userInfo = useUserStore();

const containerScale = ref(0.5)
const rtt = ref(null)

const rttChanged = (val) => {
  rtt.value = val
}

const adjustConnect = () => {
  phoneRef.value.adjustConnect()
}

</script>

<style scoped lang="less">
.opr-container{
  width: 100%;
  height: 100%;
}
.general-card{
  height: 800px;
}
.phone-container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  position: relative;
}
</style>
